<template>
  <el-dialog
    v-if="open"
    v-model="open"
    :title="
      !ruleForm.Address
        ? $t(`pageAlarmSetting.remoteServer.modal.header1`)
        : $t(`pageAlarmSetting.remoteServer.modal.header2`)
    "
    width="500"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item
        :label="$t('pageAlarmSetting.table.address')"
        prop="Address"
        :rules="[
          {
            required: true,
            message: $t('global.form.fieldRequired'),
            trigger: 'change',
          },
        ]"
      >
        <el-input
          v-model="ruleForm.Address"
          :placeholder="$t('pageAlarmSetting.remoteServer.modal.formText1')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('pageAlarmSetting.table.port')"
        prop="Port"
        :rules="[
          {
            required: true,
            message: $t('global.form.fieldRequired'),
            trigger: 'change',
          },
          {
            type: 'number',
            min: 1,
            max: 65535,
            message: $t('global.form.invalidFormat'),
            trigger: 'change',
          },
        ]"
      >
        <el-input
          v-model.number="ruleForm.Port"
          :placeholder="$t('pageAlarmSetting.remoteServer.modal.formText2')"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">
          {{ $t('global.action.cancel') }}
        </el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          {{ $t('global.action.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import type { FormInstance } from 'element-plus';
import { ref } from 'vue';
import { useAlarmSettingStore } from '@/store/ServicesManagement/AlarmSetting/AlarmSettingStore';
const alarmSettingStore = useAlarmSettingStore();

const i18n = useI18n();

const ruleFormRef = ref<FormInstance>();

const open = ref(false);

const reset = () => {
  ruleForm.value = {
    Address: props.remoteAddress,
    Port: props.remotePort,
  };
};

defineExpose({ open, reset });

const props = defineProps<{
  remoteAddress: string;
  remotePort: number | string;
}>();

const ruleForm = ref({
  Address: props.remoteAddress,
  Port: props.remotePort,
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      let errorTag = false;
      await alarmSettingStore.setRemoteAddress(ruleForm.value).catch(() => {
        errorTag = true;
      });
      await alarmSettingStore.setRemotePort(ruleForm.value).catch(() => {
        errorTag = true;
      });
      if (errorTag) {
        ElMessage({
          type: 'error',
          message: i18n.t('pageAlarmSetting.toast.errorSave'),
        });
        open.value = false;
        return;
      }
      open.value = false;
      reset();
      ElMessage({
        type: 'success',
        message: i18n.t('pageAlarmSetting.toast.successSave'),
      });
    } else {
      ElMessage({
        type: 'error',
        message: i18n.t('pageAlarmSetting.toast.errorSave'),
      });
    }
  });
};

const cancel = () => {
  open.value = false;
  reset();
};
</script>
